<template>
  <div>
    <common-head :title="$route.name" />
    <div id="Cartwrap">
      <div class="items">
        <van-swipe-cell v-for="item in items" :key="item.goodsId">
          <div class="item">
            <van-checkbox
              @click="switchCheck(item.key, item.goodsId)"
              v-model="item.selected"
            />
            <van-card
              :num="item.number"
              :price="item.price"
              :title="item.name"
              :thumb="item.pic"
            >
              <template #footer>
                <van-stepper
                  @change.capture="changeNum(item.key, item.number)"
                  v-model="item.number"
                />
              </template>
            </van-card>
          </div>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              @click="delItem(item.key)"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </div>
      <van-submit-bar
        v-show="!!items.length"
        :price="total * 100"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox v-model="allChecked">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <tabbar />
    <van-empty
      v-show="!items.length"
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="靓仔这里啥都没有了"
    />
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import Tabbar from '../../components/Tabbar.vue'
import { fetchCartItems, setByNumber, switchCheck, delCartItem } from '_api'
import { Dialog } from 'vant'
import { getToken } from '_utils'
export default {
  name: 'Cart',
  data () {
    return {
      items: [],
      total: 0,
      number: 0
    }
  },
  created () {
    this.fetchCartItems()
  },
  methods: {
    delItem (key) {
      // 给确认框删除
      Dialog.confirm({
        title: '删除商品',
        message: '您确认删除吗'
      }).then(() => {
        // on confirm
        delCartItem({
          key,
          token: getToken()
        }).then((res) => {
          if (res.data.code === 0) {
            this.items = res.data.data.items
            this.total = res.data.data.price
            this.number = res.data.data.number
          }
          if (res.data.code === 700) {
            // 全部删除
            this.items = []
            this.total = 0
            this.number = 0
            this.empty = true
          }
          if (this.$store.state.cart.items.length === 0) {
            this.empty = true
          }
        })
      })
    },
    onSubmit () {
      this.$router.push('/ordercreate')
    },
    switchCheck (key, selected) {
      switchCheck({
        key,
        selected,
        token: getToken()
      }).then((res) => {
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.total = res.data.data.price
          this.number = res.data.data.number
        }
      })
    },
    changeNum (key, number) {
      setByNumber({
        key,
        number,
        token: getToken()
      }).then((res) => {
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.total = res.data.data.price
          this.number = res.data.data.number
        }
      })
    },
    fetchCartItems () {
      fetchCartItems({
        token: getToken()
      }).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          this.items = res.data.data.items
          this.total = res.data.data.price
          this.number = res.data.data.number
        }
        if (res.data.code === 700) {
          this.number = 0
        }
      })
    }
  },
  computed: {
    allChecked: {
      get () {
        return this.items.every((item) => item.selected)
      },
      set (val) {
        // 改变全选修改单选状态
        // 改变单选状态
        // 找到所有商品的key
        const keys = []
        this.items.forEach((item) => {
          keys.push(item.key)
        })
        switchCheck({
          key: keys.join(','),
          selected: val,
          token: getToken()
        }).then((res) => {
          if (res.data.code === 0) {
            this.items = res.data.data.items
            this.total = res.data.data.price
            this.number = res.data.data.number
          }
        })
      }
    }
  },
  watch: {
    items (newVal) {
      this.$store.commit('cart/init_cart_info', {
        items: this.items,
        buyNumber: this.number
      })
    }
  },
  components: { Tabbar, CommonHead }
}
</script>

<style lang="scss" scoped>
#Cartwrap {
  padding-top: 50px;
  padding-bottom: 100px;
  .van-swipe-cell {
    margin-bottom: 5px;
  }
  .delete-button {
    height: 100%;
  }
  .item {
    display: flex;
    background-color: #fafafa;
    .van-checkbox {
      margin: 0 5px;
    }
    .van-card {
      flex: 1;
    }
  }
  .van-submit-bar {
    bottom: 50px;
  }
}
</style>
